<template>
  <layout>
    <van-tabs>
      <van-tab
        title="未提交"
        name="unsubmit"
      >
        <div
          v-for="sub in unSubmitSubList"
          :key="sub.stuNo"
          class="cf-item-card"
        >
          <van-card>
            <template #title>
              <h3> {{ `${sub.stuNo}-${sub.studentName}` }}</h3>
            </template>
            <template #desc>
              <p>{{ `初次提交时间：未提交` }}</p>
              <p>{{ `最近修改时间：未提交` }}</p>
            </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab
        title="未批阅"
        name="uncheck"
      >
        <div
          v-for="sub in unCheckSubList"
          :key="sub.stuNo"
          class="cf-item-card"
        >
          <van-card>
            <template #title>
              <h3> {{ `${sub.stuNo}-${sub.studentName}` }}</h3>
            </template>
            <template #desc>
              <p>{{ `初次提交时间：${sub.submitInfo.createdTime}` }}</p>
              <p>{{ `最近修改时间：${sub.submitInfo.modifiedTime}` }}</p>
            </template>
            <template #footer>
              <van-button
                plain
                size="small"
                @click="toHomeworkPage(sub.stuNo)"
              >查看详情</van-button>
              <van-button
                plain
                size="small"
                type="primary"
                @click="openSubmitCheck(sub)"
              >打分</van-button>
            </template>
          </van-card>
        </div>

      </van-tab>
      <van-tab
        title="已批阅"
        name="checked"
      >
        <div
          v-for="sub in checkedSubList"
          :key="sub.stuNo"
          class="cf-item-card"
        >
          <van-card>
            <template #title>
              <h3> {{ `${sub.stuNo}-${sub.studentName}` }}</h3>
            </template>
            <template #desc>
              <p>{{ `初次提交时间：${sub.submitInfo.createdTime}` }}</p>
              <p>{{ `最近修改时间：${sub.submitInfo.modifiedTime}` }}</p>
            </template>
            <template #tags>
              <span style="font-size: large;color: red;"> {{ sub.checkInfo.score }}</span>
              <span style="font-size: large;color: black;"> /10.0</span>
            </template>
            <template #footer>
              <van-button
                plain
                size="small"
                @click="toHomeworkPage(sub.stuNo)"
              >查看详情</van-button>
              <van-button
                plain
                size="small"
                type="primary"
                @click="openSubmitCheck(sub)"
              >修改分数</van-button>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 评分修改弹框 -->
    <van-dialog
      v-model="checkShow"
      show-cancel-button
      title="作业评分"
      @cancel="closeSubmitCheck"
      @confirm="confirmSubmitCheck"
    >
      <van-field
        v-model="checkFormData.score"
        label="分数："
        placeholder="输入从0~10的数字"
        type="number"
      />
    </van-dialog>
  </layout>
</template>

<script>
import Layout from '@/views/layout'
import { Tabs, Tab, Card, Dialog, Field, Toast } from 'vant'
import { mapState } from 'vuex'

export default {
  name: 'HomeworkCheck',
  components: {
    Layout,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Card.name]: Card,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field
  },
  data () {
    return {
      tabActiveName: 'unsubmit',
      checkFormData: { // 作业批改更新表单数据
        submitId: null,
        score: null
      },
      checkShow: false // 打分弹窗展示
    }
  },
  computed: {
    ...mapState({
      subList: state => state.hwCheck.submitWithCheck,
      homework: state => state.hwCheck.homework
    }),
    unSubmitSubList () {
      if (!this.subList) {
        return []
      }
      return this.subList.filter(sub => !sub.hasSubmit)
    },
    unCheckSubList () {
      if (!this.subList) {
        return []
      }
      return this.subList.filter(sub => sub.hasSubmit && !sub.hasChecked)
    },
    checkedSubList () {
      if (!this.subList) {
        return []
      }
      return this.subList.filter(sub => sub.hasSubmit && sub.hasChecked)
    }
  },
  created () {
    this.refreshData()
  },
  methods: {
    refreshData () {
      this.$store.dispatch('hwCheck/refresh', this.$route.query.homeworkId).then(data => {
      })
    },
    toHomeworkPage (stuNo) { // 跳转作业详情页
      this.$router.push({
        name: 'Homework',
        query: {
          homeworkId: this.$route.query.homeworkId,
          courseId: this.$route.query.courseId,
          userType: this.$route.query.userType,
          stuNo: stuNo
        }
      })
    },
    openSubmitCheck (sub) {
      this.checkFormData.submitId = sub.submitInfo.id
      if (sub.hasChecked) {
        this.checkFormData.score = sub.checkInfo.score
      }
      this.checkShow = true
    },
    closeSubmitCheck () { // 关闭给分弹框
      this.checkFormData = { submitId: null, score: null }
      this.checkShow = false
    },
    confirmSubmitCheck () { // 提交分数
      // 参数转换
      const reqData = {
        submitId: this.checkFormData.submitId,
        score: Number.parseFloat(this.checkFormData.score)
      }
      this.$store.dispatch('hwCheck/doCheck', reqData).then(({ message }) => {
        this.closeSubmitCheck()
        Toast.success({
          message: message,
          duration: 1000
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.cf-item-card {
  border-radius: 10%;
  width: 90%;
  margin-left: 5%;
  margin-top: 0.5rem;
}
.cf-item-card :active {
  // background-color: gainsboro;
}
</style>
